<template>
    <div>
        <el-header :style="selfstyle">
            <div>
                <span>下午茶后台管理系统</span>
            </div>
            <el-button type="info" @click="out">退出</el-button>
        </el-header>
        <el-container style="height: 500px; border: 1px solid #eee">
            <!-- 缺el-main -->
            <el-aside width="200px">
                <el-menu :default-openeds="['1', '3']" router
                :default-active="$route.path">
                    <el-submenu index="1">
                        <template slot="title"><i class="el-icon-message"></i>订单管理</template>
                        <el-menu-item index="1-1">预约订单</el-menu-item>
                        <el-menu-item index="1-2">普通订单</el-menu-item>
                        <el-menu-item index="/orders">已完成订单</el-menu-item>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title"><i class="el-icon-menu"></i>页面信息管理</template>
                        <el-menu-item index="/lunbo">轮播图管理</el-menu-item>
                        <el-menu-item index="/productsManage">商品管理</el-menu-item>
                        <el-menu-item index="/cart">分类管理</el-menu-item>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title"><i class="el-icon-setting"></i>统计信息</template>
                        <el-menu-item index="3-1">收入统计</el-menu-item>
                        <el-menu-item index="3-2">补货通知</el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>

            <el-main>
                
                
         
                <router-view/>
            
            </el-main>
        </el-container>

    </div>
</template>

<script>
    export default {
        name: 'LoginStart',
        data() {
            return {
                selfstyle:{
                    backgroundColor:'#A0DD86',
                    height: '77px',
                }
            }
        },
        methods:{
            out(){
                window.sessionStorage.clear();
                this.$router.push('/login');
            }

        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
    .el-aside .el-menu{
        height: 100%;
        color: #333;
        background-color: #56BB91;
    }
    .el-main{
        background-color:#F9F87F;
    }
    .el-header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        span{
            font-size: 20px;
        font-weight: bold;
            padding: 20px;
        }
       
    }
   
</style>
